<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleCancel"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <div style="display: flex;justify-content: space-between;">
          <span>入库日期：2021-11-30</span>
          <span>入库单编号：123456789</span>
        </div>
        <table class="table">
          <tr>
            <td style="min-width: 100px;text-align: center;">供应商名称</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['supplier', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="min-width: 50px;text-align: center;">生产商名称</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['manufacturer', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td rowspan="3" style="width: 200px;">
              <img src="a" alt style="width:100%; height:100%" />
            </td>
            <td rowspan="3" style="width: 200px;">
              <img src="a" alt style="width:100%;height:100% " />
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">车辆存放库房</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['storeId', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">保管员</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['storekeeperId', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">车辆vin码</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['vin', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">合格证号码</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['certificateNo', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">品牌名称</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['brand', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">汽车车型</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['carModel', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td rowspan="3">
              <img src="a" alt style="width:100%; height:100%" />
            </td>
            <td rowspan="3">
              <img src="a" alt style="width:100%; height:100%" />
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">车型配置</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['carTypeConfiguration', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">车辆类型</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['powerType', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">车辆燃料类型</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['fuelType', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">车辆颜色</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['outsideColor', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">内饰颜色</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['interiorColor', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">发动机型号</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['engineModel', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">车辆发动机号</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['engineNo', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">发动机排量</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['displacement', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">变速箱型号</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['gearbox', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">车辆轮胎编号</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['tireNo', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">核定载客量</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['passengerCapacity', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">功率</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['motorPower', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">排放标准</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['emissionStandards', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">轴距</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['wheelbase', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">额定载质量</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['loadQuality', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
            <td style="text-align: center;">动力蓄电池组编号</td>
            <td>
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['batteryNo', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">随车手续</td>
            <td colspan="5">
              <a-checkbox-group @change="onChange">
                <a-row>
                  <a-col :span="6">
                    <a-checkbox value="A">整车合格证</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="B">底盘合格证</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="C">气瓶合格证</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="D">随车工具一套</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="E">警示牌</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="F">保修卡</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="G">说明书</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="H">车辆一致性证书</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="I">货物进口证明书</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="J">进口机动车车辆随车检验单</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="K">进口车辆电子信息</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">原车装备</td>
            <td colspan="5">
              <a-checkbox-group @change="onChange">
                <a-row>
                  <a-col :span="6">
                    <a-checkbox value="A">空调</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="B">点烟器</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="C">安全气囊</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="D">电动天窗</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="E">行车记录仪</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="F">电动遥控门窗</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="G">ABS防抱死系统</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="H">冰箱</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="I">烟灰缸</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="J">车载电视</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="K">电子手刹</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="L">超速报警器</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="M">自动巡航系统</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="N">防盗报警装置</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="O">备胎</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="P">中控锁</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="Q">电子座椅</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="R">倒车雷达</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="S">无钥匙启动</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="T">GPS定位系统</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="U">胎压监测装置</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="V">音响</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="W">多媒体</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="X">儿童座椅</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="Y">自动驻车</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="Z">电动后备箱</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="AA">气囊减震座椅</a-checkbox>
                  </a-col>
                  <a-col :span="6">
                    <a-checkbox value="AB">多功能方向盘</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">备注</td>
            <td colspan="5">
              <a-form-item>
                <a-input
                  @click="blur($event)"
                  v-decorator="['remarks', { rules: [{ required: false, message: '请输入必填项' }] }]"
                />
              </a-form-item>
            </td>
          </tr>
        </table>
        <div style="display: flex; justify-content: space-between;">
          <span>修改日期：111</span>
          <span>修改人：111</span>
        </div>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'VehicleRegisterModelTable',
  data() {
    return {
      title: '交易信息',
      visible: false,
      model: {},
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmOrderManager/add',
        edit: '/cxm/cxmOrderManager/edit',
        saveDraft: 'cxm/cxmCommonBusiness/saveDraft',
        getDraft: 'cxm/cxmCommonBusiness/getDraft',
        getSaleInfosLike: 'cxm/cxmSalesInfo/getSaleInfosLike',
        getSaleInfos: '/cxm/cxmOrderManager/getSaleInfos',
        getStoreId: '/sale/cxmSaleStoreInfo/queryStoreMap',
        getStorekeeperId: '/sale/cxmSaleStaffInfo/queryStaffMap',
      },
      showDing: false,
      showEnterpriseUscc: false,
      storeName: [],
      storeId: [],
      storekeeperName: [],
      storekeeperId: []
    }
  },
  created() {
    getAction(this.url.getStoreId).then((res) => {
      if (res.success) {
        for (const key in res.result) {
          this.storeName.push(res.result[key]);
          this.storeId.push(key);
        }
      }
    })
    getAction(this.url.getStorekeeperId).then((res) => {
      if (res.success) {
        for (const key in res.result) {
          this.storekeeperName.push(res.result[key]);
          this.storekeeperId.push(key);
        }
      }
    })
  },
  methods: {
    saleSelect(value) {
      console.log('saleSelect', value);
      for (let i = 0; i < this.SaleInfosLike.length; i++) {
        if (this.SaleInfosLike[i].salesName == value) {
          this.form.setFieldsValue({
            salesPhone: this.SaleInfosLike[i].salesPhone
          })
        }
      }
    },
    saleChange() {
      setTimeout(() => {
        console.log(this.form.getFieldValue("salesName"));
        let httpurl = this.url.getSaleInfosLike;
        let params = {
          salesName: this.form.getFieldValue("salesName")
        }
        getAction(httpurl, params).then((res) => {
          if (res.success) {
            this.SaleInfosLike = res.result;
            this.saleSource = [];
            for (let i = 0; i < res.result.length; i++) {
              this.saleSource.push(res.result[i].salesName);
              if (i > 8) {
                break;
              }
            }
          }
        })
      }, 100);
    },
    changeDepositNotes(val) {
      if (val == '不可退') {
        this.showDing = true
      } else {
        this.showDing = false
      }
    },
    add(record) {
      console.log('add(record)', record);
      const that = this;
      that.edit(record)
      /* const that = this;
      let httpurl = this.url.getDraft;
      let params = {
        bType: "order"
      };
      getAction(httpurl, params).then((res) => {
        if (res.success) {
          if (res.result) {
            that.edit(JSON.parse(res.result))
          } else {
            getAction(that.url.getSaleInfos, params).then((res) => {
              that.edit(res.result)
            })
          }
        } else {
          that.edit({})
        }
      }) */
    },
    edit(record) {
      console.log(record);
      this.form.resetFields()
      this.model = Object.assign({}, record)
      console.log(this.model);
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          /* 基本信息： */
          supplier: this.model.supplier,
          manufacturer: this.model.manufacturer,
          storeId: this.storeId.indexOf(this.model.storeId) == -1 ? this.model.storeId : this.storeName[this.storeId.indexOf(this.model.storeId)],
          storekeeperId: this.storekeeperId.indexOf(this.model.storekeeperId) == -1 ? this.model.storekeeperId : this.storekeeperName[this.storekeeperId.indexOf(this.model.storekeeperId)],
          /* 车辆信息： */
          vin: this.model.vin,
          certificateNo: this.model.certificateNo,
          brand: this.model.brand,
          carModel: this.model.carModel,
          carTypeConfiguration: this.model.carTypeConfiguration,
          powerType: this.model.powerType,
          fuelType: this.model.fuelType,
          outsideColor: this.model.outsideColor,
          interiorColor: this.model.interiorColor,
          engineModel: this.model.engineModel,
          engineNo: this.model.engineNo,
          displacement: this.model.displacement,
          gearbox: this.model.gearbox,
          tireNo: this.model.tireNo,
          passengerCapacity: Number(this.model.passengerCapacity),
          motorPower: this.model.motorPower,
          emissionStandards: this.model.emissionStandards,
          wheelbase: this.model.wheelbase,
          loadQuality: this.model.loadQuality,
          batteryNo: this.model.batteryNo,
        })
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      /* const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {

        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add

            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化
          formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null

          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      }) */
    },
    handleCancel() {
      this.close()
    },
    onChange(checkedValues) {
      console.log('checked = ', checkedValues);
    },
    blur(e) {
      e.target.blur();
    }
  },
}
</script>

<style lang="less" scoped>
.table tr td {
  border: 1px solid #000;
}
td input,
td input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: default !important;
}
.ant-form-item {
  margin-bottom: 0px;
  cursor: default;
}
</style>